<template>
  <div class="musicList">
    <ul class="clearfloat">
      <router-link to="/discoverMusic" tag="li" class="floatLeft" v-for="list in filteredItems" :key="list.id">
        <a href="">
          <img :src="list.picUrl" alt="" width="140px" height="140px">
        </a>
        <div class="imgBottom">
          <span class="headphone"></span>
          <span>{{list.playCount>=100000?Math.round(list.playCount/10000)+'万':list.playCount}}</span>
          <a href="" class="play"></a>
        </div>
        <div class="listFooter">
          <a href="">{{list.name}}</a>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    props: {
      recommendMusicList: {
        type: Array
      }
    },
    computed: {
      filteredItems: function () {
        return this.recommendMusicList.slice(0, 8)
      }
    }
  }
</script>

<style>
  .musicList ul{
    margin-top: 20px;
  }
  .musicList li{
    position: relative;
    height: 204px;
    padding: 0 43px 15px 0;
  }
  .musicList li:nth-child(4n){
    padding-right: 0;
  }
  .musicList .imgBottom{
    position: absolute;
    top:113px;
    height:27px;
    width: 140px;
    line-height: 27px;
    background: rgba(0,0,0,.5);
    font-size: 12px;
    color: #ccc;
  }
  .musicList .headphone{
    display: inline-block;
    width: 14px;
    height: 11px;
    vertical-align: top;
    margin: 8px 2px 0 10px;
    background: url('../../../resource/iconall.png') no-repeat 0 -24px;
  }
  .musicList .play{
    float: right;
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin: 5px 10px 0 0;
    background: url('../../../resource/iconall.png') no-repeat 0 0;
  }
  .musicList .play:hover{
    background: url('../../../resource/iconall.png') no-repeat 0 -60px;
  }
  .musicList li .listFooter{
    width: 140px;
    font-size: 14px;
    margin-top: 8px;
  }
  .musicList .listFooter a{
    color: #000;
  }
</style>
